import { useState, useContext, useEffect } from 'react';
import { NavBar, Grid } from 'antd-mobile';
import { PhoneOutlined, AudioOutlined, CameraOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import { UserAddOutlined, FullscreenExitOutlined } from '@ant-design/icons';

import { ContentType } from '../../../constants';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function(props) {
  const { cid } = props;
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);

  const [audioEnable, setAudioEnable] = useState(true);
  const [users, setUsers] = useState([]);
  // const queryConversationDetail = () => {
  //   mySdkStore.sdk.querySingleConversation(cid).then(converInfo => {
  //   });
  // }

  const handleRtcMute = async (enabled) => {
    mySdkStore.sdk.setLocalAudioEnable({ enabled });
    setAudioEnable(enabled);
  }
  

  const handleHangup = () => {
    const msgBody: any = {
      msgType: ContentType.Rtc,
      msgContent: { rtcAction: 'hangUp' }
    };
    if(mySdkStore.currentMeetingInfo.cid) {
      msgBody.toCid = mySdkStore.currentMeetingInfo.cid;
    }
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    mySdkStore.sdk.sendMessage(msgParams).then(() => {
      history.goBack();
      mySdkStore.setCurrentMeetingInfo(null);
    });
  }

  useEffect(async () => {
    console.log(props, mySdkStore.currentMeetingInfo);
    let userIds = [];
    let rtcAction = 'invite';
    if(mySdkStore.currentMeetingInfo.userIds) {
      userIds = mySdkStore.currentMeetingInfo.userIds;
    }else{
      const { rows } = await mySdkStore.sdk.listGroupMembers({cid: mySdkStore.currentMeetingInfo.cid, pageIndex: 1, pageSize: 50});
      rtcAction = 'acceptInvite';
      userIds = rows;
    }
    setUsers(userIds);
    const msgBody = {
      toCid: mySdkStore.currentMeetingInfo.cid,
      msgType: ContentType.Rtc,
      msgContent: {
        rtcAction,
        rtcSlot: {
          publishVideoElementId: 'implusPublishVideoElementId',
          subscribeElementIds: userIds.map(({userId}) => {
            return {
              videoId: `implusSubscribeVideoElementId-${userId}`,
              audioId: `implusSubscribeAudioElementId-${userId}`
            }
          })
        },
       }
    };
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    mySdkStore.sdk.sendMessage(msgParams);
    return () => { 
      mySdkStore.setCurrentMeetingInfo(null);
    }
  }, [])

  return (<div className='meetingDetailPage'>
    <NavBar
      onBack={() => history.goBack()} style={{ background: 'rgba(48,51,54,1)', shadow: '0 -0.5px 0 0 rgba(0,0,0,0.10)', border: 'none' }}
      right={<UserAddOutlined style={{ color: '#fff', fontSize: 20 }}/>}
      back={<FullscreenExitOutlined style={{ color: '#fff', fontSize: 20 }} />}>
      <div className="navTitle">
        张三发起的会议
        <div className="navSubTitle">00:01  ｜  {users.length}人在会议中</div>
      </div>
    </NavBar>
    <Grid columns={2}>
      <Grid.Item className="gridItem">
        <video autoPlay={true} mute="true" playsInline={true} id="implusPublishVideoElementId"/>
      </Grid.Item>
      { users.length ?
        users.map( ({userId}) => 
          <Grid.Item className="gridItem">
            <video autoPlay={true} mute="true" playsInline={true} id={`implusSubscribeVideoElementId-${userId}`}/>
            <audio autoPlay={true} id={`implusSubscribeAudioElementId-${userId}`}/>
          </Grid.Item>
        ) : null
      }
    </Grid>
    <div className="iconButtonArea">
      <div className="iconButtonBar">
      {/* <div>
        <div className="iconWrap">
          <AudioOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        麦克风已关
      </div>
      <div>
        <div className="iconWrap">
          <PhoneOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        扬声器已关
      </div>
      <div>
        <div className="iconWrap">
          <CameraOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        摄像头已关
      </div> */}
      </div>
      <div className="iconButtonBar" style={{ justifyContent: 'center' }}>
        <div>
          <div className="iconWrap reject">
            <PhoneOutlined onClick={() => handleHangup()} style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
          </div>
        </div>
      </div>
    </div>
    {/* <div className='hangup' style={{left: '30%'}} onClick={() => handleRtcMute(!audioEnable)}>
      <div>
        <svg fill={audioEnable ? '#8a8a8a' : '#d81e06'} t="1637033155062" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13610" width="40" height="40"><path d="M400.5 526.9l31.9-31.9c-0.4-3-0.5-6.2-0.5-9.3v-105c0-43.5 35.7-78.8 79.7-78.8 31 0 57.8 17.4 71 42.9l60.5-60.5c1.4-1.4 3.8-1.5 5.3 0l20.4 19.6c1.5 1.4 1.5 3.8 0.1 5.3l-334 334c-1.5 1.5-3.8 1.5-5.3 0l-20-20c-1.5-1.5-1.5-3.8 0-5.3l64.2-64.2c-10.4-20.8-16.2-44.3-16.2-69.1 0-2.1 1.7-3.8 3.8-3.8h28.1c2 0 3.6 1.7 3.8 3.8-0.4 15 2.3 29.2 7.2 42.3zM512 960C264.6 960 64 759.4 64 512S264.6 64 512 64s448 200.6 448 448-200.6 448-448 448z m0-36c227.5 0 412-184.5 412-412S739.5 100 512 100 100 284.5 100 512s184.5 412 412 412z m-77.8-348.7c20.7 17.8 47.8 28.6 77.3 28.6 65.8 0 119.1-53.3 119.1-119.1 0-2.1 1.7-3.8 3.8-3.8h28.1c2.1 0 3.8 1.7 3.8 3.8 0 79.7-60.3 145.4-137.8 153.8v47.8h69.8c6.6 0 11.7 6.7 11.7 15v16.9c0 2.1-1.3 3.8-2.8 3.8H415.9c-1.5 0-2.8-1.7-2.8-3.8v-16.9c0-8.3 5.2-15 11.7-15h68v-47.8c-32-4.1-61-17.7-83.9-38l25.3-25.3z m157.5-90c0 43.5-35.7 78.8-79.7 78.8-18.8 0-36.1-6.4-49.7-16.9l129.4-129.4v67.5z" p-id="13611"></path></svg>
      </div>
    </div>
    <div className='hangup' style={{left: '60%'}} onClick={handleHangup}>
      <div>
      <svg fill='#d81e06' t="1622999992098" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8087" width="40" height="40">
        <path d="M885.6 230.2L779.1 123.8c-15.3-15.3-35.8-23.8-57.3-23.8-21.7 0-42.1 8.5-57.4 23.8L549.8 238.4c-15.3 15.3-23.8 35.8-23.8 57.3 0 21.7 8.5 42.1 23.8 57.4l83.8 83.8c-19.7 43.4-46.8 82.4-80.5 116.1-33.6 33.8-72.7 60.9-116.1 80.8L353.2 550c-15.3-15.3-35.8-23.8-57.3-23.8-21.7 0-42.1 8.5-57.4 23.8L123.8 664.5c-15.3 15.3-23.8 35.8-23.8 57.4 0 21.7 8.5 42.1 23.8 57.4l106.3 106.3c24.4 24.5 58.1 38.4 92.7 38.4 7.3 0 14.3-0.6 21.2-1.8 134.8-22.2 268.5-93.9 376.4-201.7C828.2 612.8 899.8 479.2 922.3 344c6.8-41.3-6.9-83.8-36.7-113.8z" p-id="8088"></path>
      </svg>
      </div>
    </div> */}
  </div>
  )
}